<template>
  <div class="user-page">
    <div class="box">
      <img
        src="http://liufusong.top:8080/img/profile/bg.png"
        alt=""
        class="img"
      />
    </div>
    <div class="box1"></div>
    <div class="box2">
      <img
        src="http://liufusong.top:8080/img/profile/avatar.png"
        alt=""
        class="img1"
      />
      <div class="box3">游客</div>
      <div class="box4"><van-button type="info" style="width:80px;height:35px" to="/login">去登录</van-button></div>
    </div>
    <van-grid :column-num="3" gutter="10" :border="false">
      <van-grid-item icon="star-o" text="我的收藏" />
      <van-grid-item icon="wap-home-o" text="我的出租"/>
      <van-grid-item icon="clock-o" text="看房记录" />
      <van-grid-item icon="idcard" text="成为房主" />
      <van-grid-item icon="user-o" text="个人资料" />
      <van-grid-item icon="service-o" text="联系我们" />
    </van-grid>
    <div class="box5"><img src="http://liufusong.top:8080/img/profile/join.png" alt=""></div>
  </div>
</template>

<script>
export default {
  name: 'user-page',
  data () {
    return {}
  },
  async created () {},
  methods: {}
}
</script>

<style lang="less" scoped>
.box5 img{
  width: 345px;
  height: 85px;
  margin-left: 15px;
}
.box4{
  margin-top: 30px;
  margin-left: -5px;
}
.box3{
  margin-left: 25%;
  margin-top: 10px;
}
.img1 {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 5px solid #f5f5f5;
}
.box2 {
  width: 70px;
  height: 70px;

  position: relative;
  margin-bottom: 150px;
  margin-left: 40%;
  margin-top: -200px;
}
.box {
  width: 375px;
  height: 191px;
}
.img {
  width: 375px;
  height: 191px;
  background-repeat: repeat;
}
.box1 {
  width: 318px;
  height: 165px;
  background-color: #fff;
  margin: 0 auto;
  position: relative;
  margin-top: -60px;
}
</style>
